<template>
  <div>
    <el-dialog title="提示" :visible="value">
      <div v-if="loading">加载中....</div>
      <el-tree
        v-else
        ref="permissionRef"
        node-key="id"
        check-strictly
        :data="data"
        :props="defaultProps"
        show-checkbox
        :default-checked-keys="permIds"
        default-expand-all
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('input', false)">取 消</el-button>
        <el-button type="primary" @click="submitPermisstionTmp">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPermissionListRequest } from "@/api/permission";
import { transfromListToTree } from "@/utils";
import { assignPremRequest } from "@/api/role";

export default {
  name: "",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    currentId: {
      type: Number,
      default: null,
    },
    permIds: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      loading: true,
    };
  },
  created() {
    this.getPermissionList();
  },
  methods: {
    async getPermissionList() {
      const res = await getPermissionListRequest();
      // 平铺数据转换为tree树形数据--- 带有children
      this.data = transfromListToTree(res.data, 0);

      this.loading = false;
    },
    async submitPermisstionTmp() {
      // console.log(this.$refs.permissionRef.getCheckedKeys())
      this.$emit("input", false);
      await assignPremRequest({
        id: this.currentId,
        permIds: this.$refs.permissionRef.getCheckedKeys(),
      });
    },
  },
};
</script>
